<template>
  <div class="row justify-center">
    <q-input
      dense
      v-model="pageParam.text"
      type="text"
      label="搜索"
      @keyup.enter="
        () => {
          f5()
        }
      "
    >
      <template v-slot:append>
        <q-btn
          dense
          round
          flat
          icon="search"
          @click="
            () => {
              f5()
            }
          "
        />
      </template>
    </q-input>
    <div>
      <q-btn
        icon="refresh"
        flat
        @click="
          () => {
            f5()
          }
        "
      />
    </div>
  </div>
  <div class="row">
    <div class="col-6" v-for="(item, index) in rows" :key="item.id">
      <q-item>
        <q-item-section top avatar> </q-item-section>
        <q-item-section>
          <q-item-label class="text-primary">#{{ item.name }}#</q-item-label>
          <q-item-label caption lines="1"> 导语: {{ item.remark }} </q-item-label>
        </q-item-section>
        <q-item-section side>
          <q-btn
            :loading="btnLoad[index]"
            dense
            :color="item.followFlag ? 'positive' : 'info'"
            flat
            :label="item.followFlag ? '取关' : '关注'"
            @click="
              async () => {
                btnLoad[index] = true
                const { data, error } = await globalFollowTopic({
                  topicId: item.id,
                })
                btnLoad[index] = false
                if (error) {
                  return
                }
                item.followFlag = data
                Ok(data ? '关注成功' : '已取消关注')
              }
            "
          />
        </q-item-section>
      </q-item>
    </div>
  </div>
  <div class="row" v-show="loading">
    <div class="col-6" v-for="item in 2" :key="item">
      <q-item>
        <q-item-section top avatar>
          <q-skeleton type="QAvatar" />
        </q-item-section>
        <q-item-section>
          <q-item-label><q-skeleton type="text" /></q-item-label>
          <q-item-label caption lines="2"> <q-skeleton type="text" /></q-item-label>
        </q-item-section>
        <q-item-section side>
          <q-skeleton type="text" class="h-50px w-50px" />
        </q-item-section>
      </q-item>
    </div>
  </div>
  <div class="row justify-center" v-if="!loading">
    <q-btn
      :disable="pageParam.recordCount == 0 || pageParam.pageNum == pageParam.totalPage"
      color="primary"
      flat
      @click="
        () => {
          if (pageParam.pageNum != pageParam.totalPage) {
            pageParam.pageNum++
            load()
          }
        }
      "
    >
      <span class="q-mx-sm">
        {{ pageParam.pageNum >= pageParam.totalPage ? '已加载全部' : '加载更多' }}
      </span>
    </q-btn>
  </div>
</template>

<script setup lang="ts">
import type { ApiType } from 'src/service/api'
import { globalFollowTopic, personalQryTopic } from 'src/service/api'
import { useYuan } from 'src/use'
import { onMounted, ref } from 'vue'

const { Ok } = useYuan()

const pageParam = ref({
  pageNum: 1,
  pageSize: 20,
  totalPage: 0,
  recordCount: 0,
  text: '',
})

const loading = ref(false)
const btnLoad = ref<Array<boolean>>([])
type rowsType = ApiType<typeof personalQryTopic>['Return']['rows'][0]

const rows = ref<Array<rowsType>>([])

const f5 = () => {
  pageParam.value.pageNum = 1
  rows.value = []
  loading.value = true
  personalQryTopic(pageParam.value).then(({ data, error }) => {
    loading.value = false
    if (!error) {
      pageParam.value.totalPage = data.totalPage
      pageParam.value.recordCount = data.recordCount
      rows.value = data.rows
    }
  })
}

const load = () => {
  loading.value = true
  personalQryTopic(pageParam.value).then(({ data, error }) => {
    loading.value = false
    if (!error) {
      pageParam.value.totalPage = data.totalPage
      pageParam.value.recordCount = data.recordCount
      rows.value.push(...data.rows)
    }
  })
}

onMounted(() => {
  f5()
})
</script>

<style scoped></style>
